<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
      background: #34495e;
      width: 300px;
      padding: 30px;
    }
    #app h2 {
      background-color: #f1c40f;
      margin-right: -100px;
    }
  </style>
<body>
    <div id="app">
        <h2>houdunren.com</h2>
      </div>
    <script>
// type	事件类型
// target	事件目标对象，冒泡方式时父级对象可以通过该属性找到在哪个子元素上最终执行事件
// currentTarget	当前执行事件的对象
// timeStamp	事件发生时间
// x	相对窗口的X坐标
// y	相对窗口的Y坐标
// clientX	相对窗口的X坐标
// clientY	相对窗口的Y坐标
// screenX	相对计算机屏幕的X坐标
// screenY	相对计算机屏幕的Y坐标
// pageX	相对于文档的X坐标
// pageY	相对于文档的Y坐标
// offsetX	相对于事件对象的X坐标
// offsetY	相对于事件对象的Y坐标
// layerX	相对于父级定位的X坐标
// layerY	相对于父级定位的Y坐标
// path	冒泡的路径
// altKey	是否按了alt键
// shiftKey	是否按了shift键
// metaKey	是否按了媒体键
// window.pageXOffset	文档参考窗口水平滚动的距离
// window.pageYOffset	文档参考窗口垂直滚动的距离


// 冒泡捕获 

//大部分事件都会冒泡，但像focus事件则不会
// event.target 可以在事件链中最底层的定义事件的对象
// event.currentTarget == this 即当前执行事件的对象


// (冒泡):当在子标签上触发事件事会冒泡执行父级标签的事件
// const app = document.querySelector('#app')
//   const h2 = document.querySelector('h2')
//   app.addEventListener('click', (event) => {
//     console.log(`event.currentTarget:${event.currentTarget.nodeName}`)
//     console.log(`event.target:${event.target.nodeName}`)
//     console.log(`event time:${event.timeStamp}`);
//     console.log('app event')
//   })
//   h2.addEventListener('click', (event) => {

//     event.stopPropagation();//阻止冒泡

//     console.log(`event.currentTarget:${event.currentTarget.nodeName}`)
//     console.log(`event.target:${event.target.nodeName}`)
//     console.log(`event time:${event.timeStamp}`);
//     console.log(`h2 event`)
//   })




    </script>
</body>
</html>